<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>我的预约入口按钮</title>
</head>
<style>
    .entryBtn {
        width: 48px;
        height: 48px;
        background: linear-gradient(180deg, #4B6BFF 0%, #9154EC 100%);
        box-shadow: 0px 9px 28px 8px rgba(0, 0, 0, 0.05), 0px 0px 16px 0px rgba(0, 0, 0, 0.04), 0px 3px 6px -4px rgba(0, 0, 0, 0.12);
        border-radius: 52px;
        backdrop-filter: blur(6px);
        position: fixed;
        z-index: 999;
        cursor: move;
        user-select: none;
        touch-action: none;
    }

    .entryBtn img {
        width: 32px;
        height: 32px;
        display: block;
        pointer-events: none;
    }
    .flex {
        display: flex;
    }
    .align-center {
        align-items: center;
    }
    .justify-center {
        justify-content: center;
    }
</style>

<body>
    <div class="entryBtn flex align-center justify-center" id="entryBtn">
        <img src="../resources/images/entryIcon.png" />
    </div>

    <script>
        const entryBtn = document.getElementById('entryBtn');
        let isDragging = false;
        let startX, startY, initialX, initialY;

        // 设置初始位置
        entryBtn.style.right = '40px';
        entryBtn.style.bottom = '40px';

        // 鼠标事件
        entryBtn.addEventListener('mousedown', startDrag);
        document.addEventListener('mousemove', drag);
        document.addEventListener('mouseup', endDrag);

        // 触摸事件
        entryBtn.addEventListener('touchstart', startDrag, { passive: false });
        document.addEventListener('touchmove', drag, { passive: false });
        document.addEventListener('touchend', endDrag);

        function startDrag(e) {
            isDragging = true;
            entryBtn.style.transition = 'none';
            
            const clientX = e.type === 'mousedown' ? e.clientX : e.touches[0].clientX;
            const clientY = e.type === 'mousedown' ? e.clientY : e.touches[0].clientY;
            
            const rect = entryBtn.getBoundingClientRect();
            startX = clientX - rect.left;
            startY = clientY - rect.top;
            
            initialX = rect.left;
            initialY = rect.top;
            
            e.preventDefault();
        }

        function drag(e) {
            if (!isDragging) return;
            
            e.preventDefault();
            
            const clientX = e.type === 'mousemove' ? e.clientX : e.touches[0].clientX;
            const clientY = e.type === 'mousemove' ? e.clientY : e.touches[0].clientY;
            
            let newX = clientX - startX;
            let newY = clientY - startY;
            
            // 限制在屏幕范围内
            const maxX = window.innerWidth - entryBtn.offsetWidth;
            const maxY = window.innerHeight - entryBtn.offsetHeight;
            
            newX = Math.max(0, Math.min(newX, maxX));
            newY = Math.max(0, Math.min(newY, maxY));
            
            entryBtn.style.left = newX + 'px';
            entryBtn.style.top = newY + 'px';
            entryBtn.style.right = 'auto';
            entryBtn.style.bottom = 'auto';
        }

        function endDrag() {
            if (!isDragging) return;
            isDragging = false;
            entryBtn.style.transition = 'all 0.3s ease';
        }

        // 窗口大小改变时重新调整位置
        window.addEventListener('resize', function() {
            const rect = entryBtn.getBoundingClientRect();
            const maxX = window.innerWidth - entryBtn.offsetWidth;
            const maxY = window.innerHeight - entryBtn.offsetHeight;
            
            if (rect.left > maxX) {
                entryBtn.style.left = maxX + 'px';
            }
            if (rect.top > maxY) {
                entryBtn.style.top = maxY + 'px';
            }
        });
    </script>
</body>

</html>